<h3>
	Datepicker autoclose tests
	<span class="ms-1 badge {{ d.isOpen() ? 'bg-success' : 'bg-danger' }}" id="open-status">{{
		d.isOpen() ? 'open' : 'closed'
	}}</span>
</h3>

<form id="default" (contextmenu)="$event.preventDefault()">
	<div class="row">
		<div class="input-group col">
			<input
				class="form-control"
				name="dp"
				placeholder="yyyy-mm-dd"
				#d="ngbDatepicker"
				ngbDatepicker
				[autoClose]="autoClose"
				[(ngModel)]="model"
				[displayMonths]="displayMonths"
			/>
			<button class="btn btn-outline-secondary" type="button" id="toggle" (click)="d.toggle()">Toggle</button>
			<button class="btn btn-outline-secondary" type="button" id="close" (click)="d.close()">Close</button>
			<button
				class="btn btn-outline-secondary"
				type="button"
				id="selectDate"
				(click)="model = { year: 2018, month: 8, day: 10 }"
			>
				10 AUG 2018
			</button>
		</div>

		<div class="col d-flex">
			<div ngbDropdown class="d-inline-block ms-3">
				<button class="btn btn-outline-secondary" id="autoclose-dropdown" ngbDropdownToggle>Choose Autoclose</button>
				<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
					<button class="dropdown-item" id="autoclose-true" (click)="autoClose = true">True</button>
					<button class="dropdown-item" id="autoclose-false" (click)="autoClose = false">False</button>
					<button class="dropdown-item" id="autoclose-outside" (click)="autoClose = 'outside'">'Outside'</button>
					<button class="dropdown-item" id="autoclose-inside" (click)="autoClose = 'inside'">'Inside'</button>
				</div>
			</div>

			<div ngbDropdown class="d-inline-block ms-1">
				<button class="btn btn-outline-secondary" id="displayMonths-dropdown" ngbDropdownToggle>Choose Months</button>
				<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
					<button class="dropdown-item" id="displayMonths-1" (click)="displayMonths = 1">One</button>
					<button class="dropdown-item" id="displayMonths-2" (click)="displayMonths = 2">Two</button>
				</div>
			</div>

			<button class="btn btn-outline-secondary ms-1" id="outside-button">Outside button</button>
		</div>
	</div>
</form>
